<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.83.0/Cesium.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.83.0/Widgets/widgets.css" rel="stylesheet">
  <!-- <script src="./public/cesium/Build/CesiumUnminified/Cesium.js"></script> -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> -->
  <style>
    #cesiumContainer{
      position: absolute;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <div id="cesiumContainer" style="position: absolute;width: 100%;z-index:-1;"></div>
  <button id='point'>位置</button>
  <button id='line'>旋转</button> 

  
</body>

</html>
<script type="module">
  import DK from './main'

  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNjI2NjEyNC1lODhhLTRiZjAtODVlZS1kOTc0ODVkMjAzMmYiLCJpZCI6MzczOTgsImlhdCI6MTYxNzE3NDc0M30.5Cq25yb9eJDeaCRXPXVf6YiEobi-KHLVi1YXryjRLIs';
  let viewer = new Cesium.Viewer('cesiumContainer', {
    // terrainProvider :  Cesium.createWorldTerrain()
  })
  viewer.scene.globe.depthTestAgainstTerrain = true
  let primitiveLayer = new DK.PrimitiveLayer(viewer)
  let entityLayer = new DK.EntityLayer(viewer)
  let position2 = new Cesium.Cartesian3(-1715450.57416652, 4993522.1849559 , 3566866.50050166)
  let position3 = new Cesium.Cartesian3.fromDegrees(117, 26, 0)

  let position = new Cesium.Cartesian3.fromDegrees(117.001 , 35.001 , 100)
  
  
  let wall = new DK.CricleWallPrimitive(position2, 100, 100, {
    slices: 8,
    color: Cesium.Color.RED
  })

  let popup = new DK.Popup(viewer)
  popup.enable = true
  console.log(popup)
  let tileset = new DK.Tileset('//resource.dvgis.cn/data/3dtiles/ljz/tileset.json', {
   
  })

  let plot = new DK.Plot(viewer)

  point.onclick = function(){
    plot.draw('point' , (overlay) => {
      entityLayer.add(overlay)
    })
  }

  line.onclick = function(){
    plot.draw('polyline' , (overlay) => {
      entityLayer.add(overlay)
    })
  }
  
  primitiveLayer.add(tileset)
  

  // plot.draw()
  // draw.onclick = function () {
  //   // plot.draw()
  //   console.log('11')
  //   plot.draw('viewShed', (overlay) => {
  //     console.log(overlay)
  //   })
  // }

  let box = new DK.BoxPrimitive(position2 , {
    dimensions : new Cesium.Cartesian3(100000 ,100000 ,100000)
  })
  
  primitiveLayer.add(box)
  viewer.zoomTo(primitiveLayer.collection)
  // let video3d = new DK.CameraVideo(viewer, {
  //   type : 'video',
  //   url:"./test.mp4",
  //   position : {
  //     x : 117,
  //     y : 25,
  //     z : 100
  //   },
  //   fov : 40,
  //   far: 1000,//distance
  //   rotation:{
  //     x:-50,//elevation
  //     y:-90,//azimuth
  //     z:10
  //   }
  // })

  let circle = viewer.entities.add({
    position : new Cesium.Cartesian3.fromDegrees(117,25,0),
    box : {
      dimensions : new Cesium.Cartesian3(100,100,100)
    }
  })
  // viewer.zoomTo(circle)

  entityLayer.add(box)
  var clippingPlanecollection1 = new Cesium.ClippingPlaneCollection({
    planes: [
      new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -500.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -500.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -505.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -505.0),
    ],
  });
  var clippingPlanecollection2 = new Cesium.ClippingPlaneCollection({
    planes: [
      new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 1000),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -2000.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -505.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -505.0),
    ],
  });

  var clippingPlanecollection3 = new Cesium.ClippingPlaneCollection({
    planes: [
      new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 2500),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -4000.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -505.0),
      new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -505.0),
    ],
  });

  // viewer.scene.globe.multiClippingPlanes = new Cesium.MultiClippingPlaneCollection({
  //   collections: [clippingPlanecollection1, clippingPlanecollection2, clippingPlanecollection3],
  //   modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(117, 25, 0)),
  //   edgeWidth: 1,
  //   edgeColor: Cesium.Color.WHITE,
  // })
  // console.log(viewer.scene.globe.multiClippingPlanes)

</script>